<template>
    <div class="helpAndFeedback">
        <el-form size="small" :inline="true" :model="filterForm" class="demo-form-inline">

            <el-form-item label="问题分类：">
                <el-select v-model="filterForm.type" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="功能问题" :value="0"></el-option>
                    <el-option label="系统问题" :value="1"></el-option>
                    <el-option label="其他" :value="2"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="反馈时间：">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="filterForm.beginTime" style="width: 100%;"></el-date-picker>
                </el-col>
                <el-col class="line tac mr10" :span="1">-</el-col>
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd" v-model="filterForm.endTime" style="width: 100%;"></el-date-picker>
                </el-col>
            </el-form-item>
            <el-form-item label="用户：">
                <el-input v-model="filterForm.userName" placeholder="请输入用户名称"></el-input>
            </el-form-item>
            <el-form-item label="是否回复：">
                <el-select v-model="filterForm.status" placeholder="请选择">
                    <el-option label="全部" value=""></el-option>
                    <el-option label="已回复" :value="1"></el-option>
                    <el-option label="未回复" :value="0"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmitSearch" id="monitorEnter">查询</el-button>
            </el-form-item>
        </el-form>

        <div>
            <el-divider></el-divider>
            <template v-for="(item,index) in tableData">
                <div class="problem-item">
                    <ul>
                        <li class="mb10">问题类型：{{['功能问题','系统问题','其他'][item.type]}}</li>
                        <li class="mb10">用户问题：{{item.content}}</li>
                        <li class="">运营人员：{{item.userName}} <span class="mr30"></span>反馈时间：{{item.createTime}}</li>
                        <li class="answer" v-if="item.status">
                            <div>{{item.answer}}</div>
                            <div>回复人员：{{item.replyPersion}} 回复时间：{{item.replyTime}}</div>
                        </li>
                    </ul>
                    <div class="problem-item-button" v-if="item.status === 0">
                        <el-button type="primary" size="small" @click="replyFeedback(item.id)">回复</el-button>
                    </div>
                </div>
                <el-divider></el-divider>
            </template>
        </div>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :current-page.sync="tableConfig.pageNum"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="tableConfig.pageSize"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :total="tableConfig.totalSize">
        </el-pagination>
        <el-dialog title="请输入回复内容" :visible.sync="dialogFormVisible">
            <el-input
                    type="textarea"
                    placeholder="请输入内容"
                    v-model="dialogFormText"
                    :autosize="{ minRows: 5, maxRows: 6}"
                    maxlength="150"
                    show-word-limit
            ></el-input>
            <div slot="footer" class="dialog-footer tac">
                <el-button class="mr30" type="primary" @click="submitDialog">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'helpAndFeedback',
        title:'帮助与反馈',
        data() {
            return {
                filterForm: {
                    beginTime: "",
                    endTime: "",
                    status: "",
                    type: "",
                    userName: "",
                },
                tableConfig: {
                    pageNum: 1,
                    pageSize: 10,
                    totalSize: 10
                },
                tableData: [],
                dialogFormVisible: false,
                dialogFormId: 0,
                dialogFormText: ""
            }
        },
        created() {
            this.getTableList()
        },
        activated(){
            this.onSubmitSearch()
        },
        mounted() {

        },
        methods: {
            onSubmitSearch() {
                this.tableConfig.pageNum = 1;
                this.getTableList()
            },
            handleSizeChange(size) {
                this.tableConfig.pageNum = 1;
                this.tableConfig.pageSize = size
                this.getTableList()
            },
            handleCurrentChange(page) {
                this.tableConfig.pageNum = page
                this.getTableList()
            },
            getTableList() {
                this.$axios.post("/cms/feedback/listPage", Object.assign({
                    pageNum: this.tableConfig.pageNum,
                    pageSize: this.tableConfig.pageSize,
                }, this.filterForm)).then((res) => {
                    this.tableData = res.list;
                    this.tableConfig.totalSize = res.total
                }).catch((err) => {
                    console.log(err);
                })
            },
            replyFeedback(id) {
                this.dialogFormId = id;
                this.dialogFormText = ""
                this.dialogFormVisible = true;
            },
            submitDialog() {
                if (!this.dialogFormText) {
                    this.$message.warning('回复信息不能为空！');
                }
                this.$axios.post("/cms/feedback/reply", {
                    id: this.dialogFormId,
                    answer: this.dialogFormText
                }).then((res) => {
                    this.dialogFormVisible = false;
                    this.getTableList()
                })
            }

        },
        components: {},
        computed: {}
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
    .helpAndFeedback {
        .problem-item {
            position: relative
        }
        .problem-item-button {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translate(0, -50%)
        }
        .answer {
            position: relative;
            width: 50%;
            background-color: #409EFF;
            padding: 10px;
            color: #fff;
            margin-top: 20px;
            &:after {
                position: absolute;
                content: '';
                width: 0;
                height: 0;
                top: -20px;
                border-width: 10px;
                border-style: solid;
                border-color: transparent transparent #409EFF transparent ;
            }
            div {
                line-height: 24px;
            }
        }
    }
</style>
